<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }" class="item"
        >酒店</el-breadcrumb-item
      >
      <el-breadcrumb-item class="item"
        >{{ cityTwon }}酒店预订</el-breadcrumb-item
      >
    </el-breadcrumb>
    <!-- 顶部 筛选部分 -->
    <pageHeader @getcities="getcities"></pageHeader>
    <!-- 中间地图部分 -->
    <el-row>
      <el-col :span="16"
        ><selMap @getposition="getpositionarea"></selMap
      ></el-col>
      <el-col :span="8"> <Map :hotelList="hotelposition" /></el-col>
    </el-row>

    <!-- 头部过滤器 -->
    <filters
      :optionsdata="options"
      @Price="Price"
      :getprice="Getprice"
      @getposition="getpositionarea"
      :hotelPrice="hotelposition"
      :page="pageSize"
      @send1="get1"
      @send2="get2"
      @send3="get3"
      @send4="get4"
    ></filters>

    <!-- 酒店模块 -->
    <hotelitem :hotelPrice="hotelposition"></hotelitem>
    <!-- 判断数据的长度为0 的时候显示-->
    <div v-if="hotelposition.length == 0" class="title">暂无符合条件的酒店</div>

    <el-pagination
      class="pagination"
      small
      layout="prev, pager, next, total"
      :total="total"
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>


<script>
import pageHeader from "@/components/hotel/pageheader.vue";
import selMap from "@/components/hotel/area.vue";
import filters from "@/components/hotel/filters.vue";
import hotelitem from "@/components/hotel/hotelitem.vue";
import Map from "@/components/hotel/map.vue";

import { hotelsoptions, postcities, cityposition } from "@/api/post.js";
import loginVue from "../user/login.vue";
export default {
  data() {
    return {
      options: {},
      cityTwon: "",
      hotelposition: "",
      // 获取酒店详情的渲染数据
      Getprice: "",
      total: 0, //这个是总数据
      id: "",
      limit: 10,
      pageSize: 0,
      a: null,
      b: null,
      c: null,
      d: null,
    };
  },
  components: {
    pageHeader,
    selMap,
    filters,
    hotelitem,
    Map,
  },
  watch: {
    getpositionarea(p) {
      this.hotelposition = p.data.data;
    },
  },
  methods: {
    get1(v) {
      this.a = v;
      console.log(this.a);
    },
    get2(v) {
      this.b = v;
      console.log(this.b);
    },
    get3(v) {
      this.c = v;
      console.log(this.c);
    },
    get4(v) {
      this.d = v;
      console.log(this.d);
    },
    // 点击切换多少页
    async handleCurrentChange(v) {
      this.pageSize = v;
      console.log(v);
      let citiesRes = await postcities(this.$route.query.cityName);
      if (citiesRes && citiesRes.data.data[0]) {
        this.id = citiesRes.data.data[0].id;
        console.log(this.id);
        // this.$emit("getposition", pisotioncity);
      }

      let pisotioncity = await cityposition({
        city: this.id,
        _limit: this.limit,
        _start: this.limit * (v - 1), //开始的那个是限制的10乘以当前页开始页面
        enterTime: this.$route.query.enterTime
          ? this.$route.query.enterTime
          : null,
        hotellevel: this.a ? this.a : null,
        hoteltype: this.b ? this.b : null,
        hotelasset: this.c ? this.c : null,
        hotelbrand: this.d ? this.d : null,
        enterTime: this.$route.query.cityName ? this.$route.query.cityName : "",
      });
      // this.hotelposition = pisotioncity;

      console.log(pisotioncity);
      if (pisotioncity.data.data && pisotioncity) {
        this.hotelposition = pisotioncity.data.data;
      }
    },
    // 获取传过来的值
    Price(v) {
      this.Getprice = v;
    },
    // 传值过来获取的数据
    getcities(city) {
      // 获取上面面包屑的渲染
      if (city && city.data.data[0]) {
        this.cityTwon = city.data.data[0].name;
      }
    },
    getpositionarea(p) {
      // 这个是接收地区的那里 显示城镇接受的信息
      // 然后父组件接收 再传递给子组件  map
      console.log(p);
      if (p && p.data) {
        this.hotelposition = p.data.data;
        this.hotelprice = p;
        this.total = p.data.total;
        console.log(this.hotelposition);
        console.log(this.hotelprice);
      }
    },
  },
  watch: {
    $route() {
      this.cityTwon = this.$route.query.cityName;
      console.log(this.$route.query);
    },
  },
  async created() {
    // 获取城市类型
    let res = await hotelsoptions();
    console.log(res);
    if (res) {
      this.options = res.data.data;
    }
  },
  mounted() {
    this.cityTwon = this.$route.query.cityName;
    console.log(this.hotelList);
  },
};
</script>


<style lang="less" scoped>
// 没有数据的时候显示数据
.title {
  text-align: center;
  margin: 40px;
}
.item {
  font-weight: 700;
  font-size: 16px;
  padding: 10px 0;
}
.container {
  width: 1000px;
  margin: 0 auto;
}
.pagination {
  margin-left: 700px;
  margin-bottom: 30px;
}
// 页码的样式
/deep/ .btn-prev {
  span {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 0 18px;
    height: 28px;
    line-height: 28px;
  }
}
/deep/ .btn-next {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 0 18px;
  height: 28px;
  line-height: 28px;
}
</style>